import RecordRTC from 'recordrtc';
import convert from '@/utils/convert'
export default {
  name: "screenRecord",
  data() {
    return {
      video: null,
      videoStart: false,
      recorder: null,
    }
  },
  created() {
    if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
      let error = 'Your browser does NOT support the getDisplayMedia API.';
      throw new Error(error);
    }
  },
  mounted() {},
  methods: {

    invokeGetDisplayMedia(success, error) {
      let displaymediastreamconstraints = {
        video: {
          displaySurface: 'monitor', // monitor, window, application, browser
          logicalSurface: true,
          cursor: 'always' // never, always, motion
        }
      };
      // above constraints are NOT supported YET
      // that's why overridnig them
      displaymediastreamconstraints = {
        video: true
      };

      if (navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
      } else {
        navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
      }

    },
    captureScreen(callback) {
      this.invokeGetDisplayMedia((screen) => {
        this.addStreamStopListener(screen, () => {
          //
        });
        callback(screen);
      }, function (error) {
        console.error(error);
        alert('Unable to capture your screen. Please check console logs.\n' + error);
      });
    },
    addStreamStopListener(stream, callback) {
      stream.addEventListener('ended', function () {
        callback();
        callback = function () {};
      }, false);
      stream.addEventListener('inactive', function () {
        callback();
        callback = function () {};
      }, false);
      stream.getTracks().forEach((track) => {
        track.addEventListener('ended', () => {
          this.stopRecording()
          callback();
          callback = function () {};
        }, false);
        track.addEventListener('inactive', function () {
          callback();
          callback = function () {};
        }, false);
      });
    },
    // 开始录屏
    startRecording() {
      this.video = this.$refs.videoDis;
      this.captureScreen(screen => {
        console.log(screen);
        this.video.srcObject = screen;
        this.recorder = RecordRTC(screen, {
          type: 'video'
        });
        this.logStartTime = this.strainer(convert.toDate(this.startTime).getTime() + this.progressValue)
        this.recorder.startRecording();
        // release screen on stopRecording
        this.recorder.screen = screen;
        this.videoStart = true;
      });
    },
    stopRecordingCallback() {

      this.video.src = this.video.srcObject = null;
      this.video.src = URL.createObjectURL(this.recorder.getBlob());
      // 如果需要下载录屏文件可加上下面代码
      let url = URL.createObjectURL(this.recorder.getBlob())
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style.display = "none";
      a.href = url;
      a.download = new Date() + ".mp4";
      a.click();
      window.URL.revokeObjectURL(url);
      this.logEndTime = this.strainer(convert.toDate(this.startTime).getTime() + this.progressValue)
      this.cutLog('截视频')
      //以上是下载所需代码
      this.recorder.screen.stop();
      this.recorder.destroy();
      this.recorder = null;
      this.videoStart = false;
    },
    // 结束录屏
    stopRecording() {
      this.recorder.stopRecording(this.stopRecordingCallback);
    }
  },
}
